<template>
  <div class="top_banner">
    <!-- <div v-if="actType=='area'" class="warn-box">
      <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
      <p><span>图片要求！</span><br />图片宽度690px，高度170px</p>
    </div> -->
    <!-- 活动1区 -->
    <div v-if="actType=='area'" >
      <div v-if="actType=='area'" class="warn-box">
        <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
        <p><span>图片要求！</span><br />图片宽度550px，高度750px</p>
      </div>
      <span class="color-666">商品图片</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="list[0]" photo-width="350" photo-height="200"></banner-form>
      <div class="warn-box">
        <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
        <p><span>图片要求！</span><br />图片宽度550px，高度750px</p>
      </div>
      <span class="color-666">左侧商品图片</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="list[1]" photo-width="200" photo-height="200"></banner-form>
      <div class="warn-box">
        <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
        <p><span>图片要求！</span><br />图片宽度550px，高度750px</p>
      </div>
      <span class="color-666">右侧商品图片</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="list[2]" photo-width="200" photo-height="200"></banner-form>
    </div>
    <div v-if="actType=='goods'">
      <span class="color-666">商品一</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="goods[0]" photo-width="300" photo-height="300"></banner-form>
      <span class="color-666">商品二</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="goods[1]" photo-width="300" photo-height="300"></banner-form>
      <span class="color-666">商品三</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="goods[2]" photo-width="300" photo-height="300"></banner-form>
      <span class="color-666">商品四</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="goods[3]" photo-width="300" photo-height="300"></banner-form>
    </div>
    <div v-if="actType=='twoGoods'">
      <div class="warn-box">
        <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
        <p><span>图片要求！</span><br />图片宽度850px，高度290px</p>
      </div>
      <span class="color-666">商品一</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="tgoods[0]" photo-width="350" photo-height="200"></banner-form>
      <div class="warn-box">
        <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
        <p><span>图片要求！</span><br />图片宽度270px，高度290px</p>
      </div>
      <span class="color-666">商品二</span>
      <banner-form type="capsuleBanner" :item-index="0" :form-data="tgoods[1]" photo-width="350" photo-height="200"></banner-form>
    </div>
  </div>
</template>

<script>
import bannerForm from "../components/bannerForm";
export default {
  components: { bannerForm },
  props:{
    actType:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      list:[{
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      },
       {
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      },
      {
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      }
      ],
      goods:[{
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      },
       {
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      },
      {
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      },
      {
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      }],
      tgoods:[{
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      },
      {
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      }]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>

</style>
